<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layuiadmin/layui/css/layui.css" media="all">
<!--  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all">-->
</head>
<body>

	<!-- 搜索栏信息 -->
	<div class="demoTable" style="margin-top:30px;margin-left:20px">
		搜索名字：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>
	
	<!-- 添加员工信息的按钮 -->
	<!-- <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;margin-left:20px">
	  <button data-method="setTop" class="layui-btn layui-btn-sm">添加员工</button>
    </div> -->
    <!-- 添加员工信息的表单 -->
    	<div id="addemployee" style="display: none">
		<!-- 这里给一个弹出表单 -->
		<form class="layui-form" lay-filter="example">
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="empname" id="empname" lay-verify="title"
						autocomplete="off" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="emppwd" id="emppwd" placeholder="请输入密码"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="empsex" id="empsex-1" value="男" title="男" checked=""> 
				    <input type="radio" name="empsex" id="empsex-2" value="女" title="女">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="text" name="emptel" id="emptel" lay-verify="title"
						autocomplete="off" placeholder="请输入手机号"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">员工身份</label>
				<div class="layui-input-block">
					<select name="emplevel" id="emplevel" lay-filter="aihao">
						<option value="0" id="waiter">服务员</option>
						<option value="1" id="manager">经理</option>
					</select>
				</div>
			</div>


			<div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">联系地址</label>
			    <div class="layui-input-block">
			        <textarea placeholder="请输入联系地址" class="layui-textarea" name="empaddress" id="empaddress"></textarea>
			    </div>
            </div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn btn-update" type="button" lay-submit=""
						lay-filter="demo1">保存</button>
				</div>
			</div>
		</form>

	</div>
	
	<!-- 编辑信息 -->
 <div id="editemployee" style="display:none">
 <form class="layui-form" lay-filter="example">
 <input type="hidden" name="empid" id="empid" lay-verify="title"
						autocomplete="off" placeholder="请输入姓名"
						class="layui-input">
			<div class="layui-form-item">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="empname" id="empname1" lay-verify="title"
						autocomplete="off" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="password" name="emppwd" id="emppwd1" placeholder="请输入密码"
						autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="empsex" id="empsex1-1" value="男" title="男" checked=""> 
				    <input type="radio" name="empsex" id="empsex1-2" value="女" title="女">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label">手机号</label>
				<div class="layui-input-block">
					<input type="text" name="emptel" id="emptel1" lay-verify="title"
						autocomplete="off" placeholder="请输入手机号"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">员工身份</label>
				<div class="layui-input-block">
					<select name="emplevel" id="emplevel1" lay-filter="aihao">
						<option value="0" id="waiter1">服务员</option>
						<option value="1" id="manager1">经理</option>
					</select>
				</div>
			</div>


			<div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">联系地址</label>
			    <div class="layui-input-block">
			        <textarea placeholder="请输入联系地址" class="layui-textarea" name="empaddress" id="empaddress1"></textarea>
			    </div>
            </div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn btn-update" type="button" lay-submit=""
						lay-filter="demo2">保存</button>
				</div>
			</div>
 </form>
 </div>
	

	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
   
				<button class="layui-btn layui-btn-sm" lay-event="add">添加员工</button>
				<!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
				<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
	
			</div>
		</script>

	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		</script>

	<script src="layuiadmin/layui/layui.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->



	<script>
	//遍历所有员工信息
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',
				url : 'listEmployee'
				,
				toolbar : '#toolbarDemo',
				title : '用户数据表',
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					field : 'empid',
					width : 100,
					title : '员工ID',
					align : 'center',
					sort : true
				}, {
					field : 'empname',
					title : '姓名',
					align : 'center',
					width : 120
				}, {
					field : 'emppwd',
					title : '密码',
					align : 'center',
					width : 200
				}, {
					field : 'empsex',
					width : 80,
					align : 'center',
					title : '性别'
				}, {
					field : 'emptel',
					title : '手机',
					align : 'center',
					width : 180
				}, {
					field : 'emplevel',
					title : '员工身份',
					align : 'center',
					width : 100,
					templet : function(res) {
						return res.emplevel == 0 ? "服务员" : "经理";
					}
				}, {
					field : 'empaddress',
					align : 'center',
					title : '联系地址'
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					align : 'center',
					width : 120
				} ] ],
				page : true,
				id : 'testReload'
			});

			
			
			//表格数据重载，模糊查询
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							//这里传值给servlet
							content : demoReload.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			
			

			//头工具栏事件 ,做添加操作
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
									switch(obj.event) {
									    case 'add':
										var data = checkStatus.data;
										layer.open({
									    	  type : 1,
												content : $("#addemployee"),//这里弹出的内容是div的id为addemployee
												title : '添加员工信息',
												area : [ '700px', '500px' ]
									      });
										break;
									
									};
			});
			  
			//ajax添加提交事件,  此处搭配添加操作弹出层
				layui.form.on('submit(demo1)', function(data) {

					$.ajax({
						type : "post",
						url : "addEmployee",
						data : JSON.stringify(data.field),
						contentType : "application/json",
						success : function(cm) {
						    layer.msg(cm.msg, {
								time : 1000,
							},function() {
								if (cm.msg == "添加成功") {
									layer.closeAll();
									location.reload('testReload');
								}
							}); 
							
						}

					});

					//return false;
				});
			
			

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
// 				console.log(data.empsex)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						obj.del();
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					
					//给表单元素赋值
					$("#empid").attr("value",data.empid);
			    	$("#empname1").attr("value",data.empname);
			    	$("#emppwd1").attr("value",data.emppwd);
			    	$("#emptel1").attr("value",data.emptel);
                    //文本域的值
			    	$("#empaddress1").val(data.empaddress);

			    	 if(data.empsex=="女"){//设置性别,针对checked属性：[如果弹出层open()的 content:$("#edituser")没有.html,则用prop]
			    		                                     //[如果弹出层open()的 content:$("#edituser").html,则用attr]
			    		$("input[name='empsex'][value='女']").prop("checked",true);
			    		$("input[name='empsex'][value='男']").prop("checked",false);
			    	}else{
			    		$("input[name='empsex'][value='男']").prop("checked",true);
			    		$("input[name='empsex'][value='女']").prop("checked",false);
			    	} 
			    	
			    	layui.form.render('radio');
			    	
			    	
			    	 if(data.emplevel==0){//设置级别
			    		$("#waiter1").attr("selected",true);
			    		$("#manager1").attr("selected",false);
			    	}else{
			    		$("#waiter1").attr("selected",false);
			    		$("#manager1").attr("selected",true);
			    	}
			    	
			    	 
			    	
			    	
			    	//添加一个弹出层
			    	var index1=layer.open({
			    		type:1,    		
			    		content:$("#editemployee"),//这里弹出的内容是div的id为edituser
			    		title:'修改员工信息',
			    		area: ['700px', '500px']
			    		
			    		
			    	});
			    	
			    	layui.form.render();//这个是表单的render，用于处理单选框、按钮、多选框不能被选中的问题
				}
			});
			
			//ajax修改提交,  此处搭配监听行工具事件  的修改操作
			layui.form.on('submit(demo2)', function(data) {
				//这里输出看下json对象
				console.log(JSON.stringify(data.field));

				$.ajax({
					type : "put",
					url : "updateEmployee",
					data : JSON.stringify(data.field),
					contentType : "application/json",
					success : function(cm) {
						layer.msg(cm.msg, {
							time : 1000,
						},function() {
							if (cm.msg == "修改成功") {

								layer.closeAll();
								location.reload('testReload');
								

							}
						});
					}

				});

				return false;
			});
			
			
			
			
			
		});
			
	</script>

</body>
</html>